@charset "UTF-8";

@import '_reset';
@import '_common';
// 中间
section {
	padding: r(89) 0 r(96);
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	overflow: auto;
	.swiper {
		position: relative;
		width: 100%;
		height: r(357);
		overflow: hidden;
		img {
			width: 100%;
			display: block;
		}
		.mask {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: r(104);
			background-color: rgba(0,0,0,.5);
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			color: white;
			padding: r(24) r(24) r(14) r(30);
			h4 {
				font-size: r(27);
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.date {
				display: flex;
				position: relative;
				justify-content: space-between;
				font-size: r(18);
				.date_left {
					span {
						i {
							font-size: r(20);
						}
						&:first-child {
							margin-right: r(48);
						}
					}
				}
				.date_right {
					
				}
				ol {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					display: flex;
					li {
						width: r(10);
						height: r(10);
						border-radius: 50%;
						background-color: #cebeb1;
						margin: 0 r(6);
					}
					.active {
						background-color: $color;
					}
				}
			}
		}
	}
	.mode_one {
		margin: r(10) auto 0;
		width: r(581);
		.content_box {
			display: flex;
			justify-content: space-between;
			height: r(118);
			padding: r(20) 0;
			box-sizing: content-box;
			.c_left {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: r(324);
				h4 {
					font-size: r(25);
					color: black;
					display: -webkit-box;
					overflow: hidden;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				.date {
					display: flex;
					justify-content: space-between;
					font-size: r(20);
					color: #c5c5c5;
					margin-top: r(10);
					.date_left {
						i {
							font-size: r(20);
						}
					}
					.date_right {
						span {}
					}
				}
			}
			.c_right {
				width: r(208);
				img {
					width: 100%;
					display: block;
				}
			}
			&:first-child {
				border-bottom: 1px solid #e2e2e2;
			}
		}
	}
	.bottom_line {
		height: r(26);
		background-color: #f5f5f5;
	}
	.mode_two {
		margin: r(10) auto 0;
		width: r(581);
		padding: r(20) 0;
		h4 {
			font-size: r(25);
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.show_img {
			display: flex;
			justify-content: space-between;
			margin-top: r(18);
			img {
				width: r(186);
				height: r(128);
			}
		}
		.date {
			margin: r(14);
			color: #c5c5c5;
			font-size: r(20);
			.date_left {
				display: flex;
				.tx {
					width: r(27);
					height: r(27);
					img {
						width: 100%;
						display: block;
					}
					margin-right: r(5);
				}
				span {
					margin-right: r(20);
					
				}
				i {
					font-size: r(20);
					margin-right: r(5);
				}
			}
			.date_right {}
		}
	}
	.more {
		color: #8b8b8b;
		text-align: center;
		padding: r(20);
		width: r(581);
		margin: r(10) auto 0;
		border-top: 1px solid #e6e6e6;
		font-size: r(22);
	}
}